<template>
    <modal
        class='component-confirm'
        :show='show'
        :title='title'
        :maskClose='maskClose'
        :closeButton='false'
        @close='emitClose'>
        <h1 class="component-confirm__title"> {{ title }} </h1>
        <p class="component-confirm__tips" > {{ tips }} </p>
        <div class="component-confirm__content">
            <slot></slot>
        </div>
        <footer class="component-confirm__buttons bdr-bottom" v-if='closeText || confirmText'>
            <span class="component-confirm__button button  pure si1" v-if='closeText' @click="emitCancle">{{closeText}}</span>
            <span class="component-confirm__button button  pure" v-if='confirmText' @click="emitConfirm">{{confirmText}}</span>
        </footer>
    </modal>
</template>

<script>
    import modal from './Modal.vue'
    import buttonLoading from './ButtonLoading.vue'

    export default {
        props:{
           loading:{
                type: Boolean,
                default: false
            },
            maskClose:{
                type: Boolean,
                default:true
            },
            tips:{
                type: String,
                default:''
            },
            title:{
                type: String,
                default:''
            },
            show:{
                type: Boolean,
                required: true,
            },
            closeText:{
                type: String,
                default: '取消',
            },
            confirmText:{
                type: String,
                default: '前往',
            }
        },
        data() {
            return {

            }
        },
        methods:{
            emitClose(){
                this.$emit('close')
            },
            emitCancle(){
                this.$emit('close')
                this.$emit('cancle')
            },
            emitConfirm(){
                this.$emit('confirmss')
            }
        },
        components:{ modal, buttonLoading },
        /*created(){
            $('body').height($('body')[0].scrollHeight);
        }*/
    }
</script>
<style>
    .component-modal__main{
             padding:0!important;
             font-weight: normal;
           
        }
        .component-confirm .component-modal__containerr{
            border-radius: 15px;
        }
        /* .component-modal__container{
            border-radius: 15px;
        } */
</style>
<style lang="scss" scoped>
   /*  @import "../sass/variables";
   @import "../sass/extends";
   @import "../sass/mixins";
    */
    .si1{
        font-size: 18px;
        border-radius: 0;
        border-right: 1px solid #eceef0;
        box-shadow: 0 1px 1px #fff;
   } 
    .component-confirm{
        .component-modal__main{
             padding:0!important;
           
        }
        .component-confirm__title{
           font-size:19px;
           font-weight:600;
           text-align:center;
           margin-top:22px;
           font-weight: 600;
           color:#333;
           padding:0;
        }
        .component-confirm__tips{
            margin-top:12px;
            font-size:14px;
            color:#333;
            text-align:center;
            margin-left:8px;
        }
        .button{
            height:40px;
            font-size:15px;
        }
        .component-modal__header{
            border-bottom:none;
        }
        
        .component-modal__container{
            padding:0;
            width:72%!important;
            border-radius:15px;
        }
        .component-button-loading{
            margin-top:0;
            width: 2em;
        }
        .component-confirm__buttons {
            border-top: 1px solid #eceef0;  
            box-shadow: 0 1px 1px #fff;  
        }
        .component-confirm__buttons{
            margin-top:23px;
            
            display:flex;
            justify-content:flex-end;
            text-align:center;
            padding:0;
            .short{
                width: auto;
                min-width: 65px;
                margin-left:8px;
                &:first-child{
                    margin-left:0;
                }
            }
        }
         .pure{
            color:#0072FF;
            font-size: 18px;
        } 
    }
</style>


